<template>
<div>
    <el-dialog title="新增管理员" :visible.sync="showFlag" @close="closeDialog" width="40%">
      <el-form ref="addAdminForm" :model="addAdminForm" :rules="addAdminRules" label-width="80px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="addAdminForm.username" placeholder="请输入管理员姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="id">
          <el-input v-model="addAdminForm.id" placeholder="请输入管理员账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addAdminForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer" align="center">
          <el-button type="success" @click="onSave('addAdminForm')">保 存</el-button>
          <el-button @click="onCancel('addAdminForm')">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>

<script>

export default {
  name: "addAdmin",
  data(){
    //验证规则
    const validate = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]*$/g
      if (!value) {
        callback(new Error('请输入内容'))
      } else if (value.length < 3 || value.length > 6) {
        callback(new Error('内容长度需在 3 到 6 个字符'))
      } else if (!reg.test(value)) {
        callback(new Error('内容需为字母或数字'))
      } else {
        callback()
      }
    }
    return{
      addAdminForm:{
        id:'',
        username:'',
        password:''
      },
      showFlag:false,
      addAdminRules:{
        username: [
          { required: true, message: '请输入管理员名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        id: [{required: true,message: '请输入管理员账号',validator: validate, trigger: 'blur'}],
        password:[{required: true,message: '请输入密码',validator: validate, trigger: 'blur'}]
      }
    }
  },
  methods:{
    init(){
      this.showFlag=!this.showFlag
    },
    //保存添加数据
    onSave(){

      this.showFlag=false
    },
    //取消添加
    onCancel(){
      this.showFlag=false
    },
    //关闭对话框的回调函数
    closeDialog(){

    }
  }
}
</script>

<style scoped>

</style>